<script lang="ts" setup>
// #region 引入包, 函数和组件
import { useTemplateRef, reactive } from 'vue'
import { type FormInstance, type FormRules, ElMessage } from 'element-plus'

// #endregion

// #region // 使用模块(仓库、路由、父组件参数函数)
export interface Form {
  username: string
  password: string
  passwordAg?: string
}
interface Props {
  title: string
  msg: string
  text: string
}
interface Emits {
  change: []
  success: [params: Form]
}

const props = defineProps<Props>()
const form = defineModel<Form>('form')
const emits = defineEmits<Emits>()
console.log(props, emits)
// #endregion

// #region // 变量
const el_form_ref = useTemplateRef<FormInstance>('el_form_ref') // 表单对象
const rules = reactive<FormRules<Exclude<typeof form.value, undefined>>>({
  username: [
    { required: true, message: '用户名不能为空', trigger: 'blur' },
    { min: 3, max: 10, message: '用户名长度为3到10位', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
    {
      pattern: /^\w{3,10}$/,
      message: '密码只能由3到10位的字母、数字和下划线组成',
      trigger: 'blur',
    },
  ],
  passwordAg: [
    { required: true, message: '请再次确认密码', trigger: 'blur' },
    { validator: again, trigger: 'blur' },
  ],
})

// #endregion

// #region // 函数
// 验证二次确认密码
function again(rule: unknown, value: string, callback: (error?: string | Error) => void) {
  if (!value) return callback()
  if (!form.value) return callback()
  if (form.value.password !== value)
    return callback(new Error('两次输入的密码不一致, 请再次确认后输入!'))
  else callback()
}
// 提交表单 -> 调父组件的函数
const submit = async (el: FormInstance | null) => {
  if (!el) return
  // console.log(ElMessage.success('登录成功'))
  const result = await el.validate()
  if (result) {
    console.log(result)
    emits('success', form.value!)
  } else {
    ElMessage({
      type: 'error',
      message: '验证失败',
      plain: true,
    })
  }
}
// #endregion

// #region // 生命周期和vue函数
// console.log(isRef(form))
// #endregion
</script>

<template>
  <h3>{{ title }}</h3>
  <el-form :model="form" ref="el_form_ref" :rules="rules" :status-icon="true">
    <el-form-item prop="username">
      <el-input v-model.trim="form!.username" placeholder="请输入用户名" />
    </el-form-item>
    <el-form-item prop="password">
      <el-input v-model.trim="form!.password" show-password placeholder="请输入密码" />
    </el-form-item>
    <el-form-item prop="passwordAg" v-if="form!.passwordAg !== undefined">
      <el-input v-model.trim="form!.passwordAg" show-password placeholder="请再次确认密码" />
    </el-form-item>
    <el-form-item>
      <el-button class="submit_btn submit_width" type="primary" @click="submit(el_form_ref)">{{
        text
      }}</el-button>
    </el-form-item>
    <el-form-item>
      <el-button class="submit_btn" link type="primary" @click="emits('change')">{{
        msg
      }}</el-button>
    </el-form-item>
  </el-form>
</template>

<style lang="scss" scoped>
h3 {
  line-height: 80px;
  font-size: 24px;
}
.el-form {
  width: 100%;
}
.el-input {
  margin-top: 10px;
}
.submit_width {
  width: 100%;
}
.submit_btn {
  margin: 10px auto;
}
</style>
